<template>
	<view>
		<u-skeleton :loading="isFirst" rows="5">
			<view class="box" style="width: 100%; height: 100%; background-color: rgba(244, 244, 244);padding: 2rpx;">

				<view class="content_one boxShadow" style="">
					<view class="head">
						<view class="y_cell">

							<view class="y_cell_left">
								<view style="float: left;">
									<text class="u-cell-text">累计排名</text>

									<view class="y_tag floatright y_tag_bgPrimary mlw">
										第 {{data.top}} 名
									</view>

								</view>
							</view>

							<view class="y_cell_right">
								<view style="float: left;">
									<text class="u-cell-text">头衔</text>

									<view class="y_tag floatright y_tag_bgPrimary mlw">
										{{data.rank}}
									</view>

								</view>

							</view>
						</view>

						<view class="y_cell">

							<view class="y_cell_left">
								<view style="float: left;">
									<text class="u-cell-text">累计刷题</text>

									<view class="y_tag floatright y_tag_bgPrimary mlw">
										{{data.totalCount}} 道
									</view>

								</view>
							</view>

							<view class="y_cell_right">
								<view style="float: left;">
									<text class="u-cell-text">正确率</text>

									<view class="y_tag floatright y_tag_bgPrimary mlw">
										{{data.totalRightPercent}} %
									</view>

								</view>

							</view>
						</view>

						<view class="y_cell">

							<view class="y_cell_left">
								<view style="float: left;">
									<text class="u-cell-text">本周刷题</text>

									<view class="y_tag floatright y_tag_bgPrimary mlw">
										{{data.weekCount}} 道
									</view>

								</view>
							</view>


							<view class="y_cell_right">
								<view style="float: left;">
									<text class="u-cell-text">正确率</text>

									<view class="y_tag floatright y_tag_bgPrimary mlw">
										{{data.weekRightPercent}} %
									</view>

								</view>

							</view>


						</view>


						<view class="y_cell">

							<view class="y_cell_left">
								<view style="float: left;">
									<text class="u-cell-text">今天刷题</text>

									<view class="y_tag floatright y_tag_bgPrimary mlw">
										{{data.dayCount}} 道
									</view>

								</view>
							</view>


							<view class="y_cell_right">
								<view style="float: left;">
									<text class="u-cell-text">正确率</text>

									<view class="y_tag floatright y_tag_bgPrimary mlw">
										{{data.dayRightPercent}} %
									</view>

								</view>

							</view>


						</view>



					</view>
				</view>
				<div class="tiao"></div>



				<!-- <template> -->
				<view class="boxShadow">
					<view style="background-color: #fff;">
						<u-grid :border="false" @click="gridClick" border col="2">
							<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">

								<view :class="baseListItem.name" style="padding-top: 20rpx; font-size: 44rpx;">

								</view>
								<text class="grid-text">{{baseListItem.title}}</text>
							</u-grid-item>
						</u-grid>
						<u-toast ref="uToast" />
					</view>
				</view>
				<!-- </template> -->


			</view>
			<view class="" v-if="data.dayTops&& data.weekTops && data.tops">
				<view class="today" v-if="data.dayTops.length!=0">
					<view class="y_yuantitle zongse_title" style="margin-top: 20rpx;margin-bottom: 20rpx;">
						今日排行榜
					</view>
					<view class="boxShadow bd_e">
						<view class="box_top" style="padding-bottom: 10rpx;
						  								border: 1px solid #eee;
						  								box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
							<view style="display: flex;font-weight: 600;border-bottom: 2px solid #eee;">
								<view class="tops">排名</view>
								<view class="tops">姓名 </view>
								<view class="tops">刷题数</view>
								<view class="tops">正确率</view>
								<view class="tops">组织</view>
							</view>

							<view style="display: flex;" v-for="(item,i) in data.dayTops" :key="item.id">
								<view class="tops">
									<view class="y_tag floatleft y_tag_zongse mlw"
										style="margin-left: 55rpx; font-size: 12px;">
										{{i+1}}
									</view>
								</view>
								<view class="tops">
									<view class="y_tag floatleft y_tag_zongse mlw"
										style="margin-left: 55rpx; font-size: 12px;">
										{{item.name}}
									</view>
								</view>
								<view class="tops">
									<view class="y_tag floatleft y_tag_zongse mlw "
										style="margin-left: 55rpx; font-size: 12px;">
										{{item.count}}
									</view>
								</view>
								<view class="tops">
									<view class="y_tag floatleft mlw y_tag_zongse"
										style="margin-left: 55rpx; font-size: 12px;">
										{{item.rightPercent}}%
									</view>
								</view>
								<view class="tops">
									<view class="y_tag floatleft mrw "
										style="margin-left: 60rpx; font-size: 12px;
										color: rgb(215, 112, 118); border: 1px solid rgb(215, 112, 118);">
										{{item.org.join(",")}}
									</view>
								</view>
							</view>

						</view>
					</view>
				</view>

				<view class="weekday" v-if="data.weekTops.length!=0">
					<view class="y_yuantitle qinglvse_title" style="margin-top: 20rpx;margin-bottom: 20rpx;">
						本周排行榜
					</view>
					<view class="boxShadow bd_e">
						<view class="box_top" style="padding-bottom: 10rpx;
						 								border: 1px solid #eee;
						 								box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
							<view style="display: flex;font-weight: 600;border-bottom: 2px solid #eee;">
								<view class="tops">排名</view>
								<view class="tops">姓名 </view>
								<view class="tops">刷题数</view>
								<view class="tops">正确率</view>
								<view class="tops">组织</view>
							</view>

							<view style="display: flex;" v-for="(item,i) in data.weekTops" :key="item.id">
								<view class="tops">
									<view class="y_tag floatleft y_tag_bgSuccess mlw"
										style="margin-left: 55rpx; font-size: 12px;">
										{{i+1}}
									</view>
								</view>
								<view class="tops">
									<view class="y_tag floatleft y_tag_bgSuccess mlw"
										style="margin-left: 55rpx; font-size: 12px;">
										{{item.name}}
									</view>
								</view>
								<view class="tops">
									<view class="y_tag floatleft y_tag_bgSuccess mlw y_tag_bgSuccess"
										style="margin-left: 55rpx; font-size: 12px;">
										{{item.count}}
									</view>
								</view>
								<view class="tops">
									<view class="y_tag floatleft mlw y_tag_bgSuccess"
										style="margin-left: 55rpx; font-size: 12px;">
										{{item.rightPercent}}%
									</view>
								</view>
								<view class="tops">
									<view class="y_tag floatleft mrw y_tag_success"
										style="margin-left: 60rpx; font-size: 12px;">
										{{item.org.join(",")}}
									</view>
								</view>
							</view>

						</view>
					</view>
				</view>
				

				<view class="today">
					<view class="y_yuantitle qingse_title" style="margin-top: 20rpx;margin-bottom: 20rpx;">
						历史排行榜
					</view>
					<view class="boxShadow bd_e">
						<view class="box_top" style="padding-bottom: 10rpx;
						 								border: 1px solid #eee;
						 								box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
							<view style="display: flex;font-weight: 600;border-bottom: 2px solid #eee;">
								<view class="tops">排名</view>
								<view class="tops">姓名 </view>
								<view class="tops">刷题数</view>
								<view class="tops">正确率</view>
								<view class="tops">组织</view>
							</view>

							<view style="display: flex;" v-for="(item,i) in data.tops" :key="item.id">
								<view class="tops">
									<view class="y_tag floatleft y_tag_bgPrimary mlw"
										style="margin-left: 55rpx; font-size: 12px;">
										{{i+1}}
									</view>
								</view>
								<view class="tops">
									<view class="y_tag floatleft y_tag_bgPrimary mlw"
										style="margin-left: 55rpx; font-size: 12px;">
										{{item.name}}
									</view>
								</view>
								<view class="tops">
									<view class="y_tag floatleft y_tag_bgPrimary mlw "
										style="margin-left: 55rpx; font-size: 12px;">
										{{item.count}}
									</view>
								</view>
								<view class="tops">
									<view class="y_tag floatleft mlw y_tag_bgPrimary"
										style="margin-left: 55rpx; font-size: 12px;">
										{{item.rightPercent}}%
									</view>
								</view>
								<view class="tops">
									<view class="y_tag floatleft mrw "
										style="margin-left: 60rpx; font-size: 12px;">
										{{item.org[item.org.length-1]}}
									</view>
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
		</u-skeleton>
	</view>
</template>

<script>
	import {
		GetPracticeStatistics
	} from '../../api/brush_questions.js';
	export default {
		data() {
			return {
				data: [],
				isFirst:true,
				baseList: [{
						name: 'icon iconfont icon-changjianwentixiangguanwenti',
						title: '随机刷题'
					},
					{
						name: 'icon iconfont icon-icon-kaoshijilu',
						title: '模拟真题'
					},
					{
						name: 'icon iconfont icon-cuoti',
						title: '错题·收藏'
					},
					{
						name: 'icon iconfont icon-lishi',
						title: '刷题历史'
					},
				]
			}
		},
		onShow() {
		},
		onPullDownRefresh() {
			this.bindData()
		},
		onLoad() {
			this.bindData()
		},
		methods: {
			bindData(){
				GetPracticeStatistics().then(res => {
					uni.stopPullDownRefresh();
					if (res.result === 0) {
						this.data = res.data;
						this.isFirst=false;
					}
				})
			},
			gridClick(name) {
				switch (name) {
					case 0:
						uni.navigateTo({
							url: "/pages/brush_questions/random_questions/random_questions"
						})
						break;
					case 1:
						uni.navigateTo({
							url: "/pages/brush_questions/mock_questions/mock_questions"
						})
						break;
					case 2:
						uni.navigateTo({
							url: "/pages/brush_questions/error_book/index/index"
						})
						break;
					case 3:
						uni.navigateTo({
							url: "/pages/brush_questions/brush_history/brush_history"
						})
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style>
	.tops {
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		flex: 1;
		text-align: center;
		margin-top: 5rpx;
	}


	.content_one {
		border-radius: 12rpx;
		width: 98%;
		margin-left: 0.5;
		background-color: #fff;
		margin-top: 4rpx;
	}

	.tiao {
		background: rgba(238, 238, 238);
		height: 8rpx;
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
	
	.y_tag_zongse{
		color: rgb(215, 112, 118) !important;
		background-color: rgb(255, 225, 225) !important;
		border:  1px solid rgb(255, 225, 225) !important;
	}
</style>